<template >
  <div class="personal" v-for="value in data.slice(0, 1)">

    <van-card desc="value.adress" class="content">

      <template #thumb>
        <van-icon name="wap-home-o" class="goods" @click="backToHome"></van-icon>
        <img :src="value.url" class="photo" style="margin-top:20px;" />
      </template>

      <template #title>
        <div class="name">
          <p style="margin-left:200px; " @click="$event => handleAddToCart(value)">关注</p>
          <h3>{{ value.name }} <span>&emsp;主治医师</span></h3>
          <div>{{ value.adept }}</div>
        </div>
      </template>
      <template #tags>
        <div class="word">
          <van-icon name="star" color="rgb(25, 174, 11)" size="18px">5.0</van-icon>
          / 接诊数&nbsp;<span>1555&emsp;</span>/ 平均响应&nbsp;<span>27分钟</span>
        </div>
      </template>
      <template #footer>
        <div class="pic">
          <van-icon name="smile-comment-o" color="rgb(25, 174, 11)" size="50px" class="logo" />
          <div class="text">
            <h4>图文咨询￥30/次</h4>
            <br />
            <span>最长48小时图文多次沟通</span>
          </div>
          <div class="btn">
            <van-button type="primary" color="rgb(17, 200, 32)" size="small" @click="handleClick">去咨询</van-button>
          </div>
        </div>

        <div class="pic">
          <van-icon name="phone-o" color="rgb(25, 174, 11)" size="50px" class="logo" />
          <div class="text">
            <h4>电话咨询￥59/15分钟</h4>
            <br />
            <span>预约电话，沟通更清楚</span>
          </div>
          <div class="btn">
            <van-button type="primary" color="rgb(17, 200, 32)" size="small" @click="handleClick">去咨询</van-button>
          </div>
        </div>
      </template>
    </van-card>

    <van-notice-bar left-icon="volume-o" scrollable background="rgb(229, 235, 240)" text="疾病不可怕，病急乱投医才可怕。" />
  </div>
  <h3 style="padding-left: 10px">评价</h3>
  <div>
    <span style="padding-left: 10px">⭐45%的评价认为回复很及时</span>
    <div id="cxk">
      <p style="padding-left: 10px">赵六 <span class="sps">★★★★★</span></p>
      <ul class="pj">
        <li>回复很及时</li>
        <li>解答很有帮助</li>
        <li>给了治疗建议</li>
        <li>非常热心</li>
        <li>非常热心</li>
      </ul>
      <p style="padding-left: 10px">
        这个医生超级牛逼,治好了我多年的痔疮,人长得又帅这个医生超级牛逼,治好了我多年的痔疮,人长得又帅这个医生超级牛逼,治好了我多年的痔疮,人长得又帅
      </p>
    </div>
    <div id="cxk">
      <p style="padding-left: 10px">李四 ★★★★★</p>
      <ul class="pj">
        <li>回复很及时</li>
        <li>解答很有帮助</li>
        <li>给了治疗建议</li>
        <li>非常热心</li>
        <li>非常热心</li>
      </ul>
      <p style="padding-left: 10px">
        这个医生超级牛逼,治好了我多年的痔疮,人长得又帅这个医生超级牛逼,治好了我多年的痔疮,人长得又帅这个医生超级牛逼,治好了我多年的痔疮,人长得又帅
      </p>
    </div>
    <div id="cxk">
      <p style="padding-left: 10px">王五 ★★★★★</p>
      <ul class="pj">
        <li>回复很及时</li>
        <li>解答很有帮助</li>
        <li>给了治疗建议</li>
        <li>非常热心</li>
        <li>非常热心</li>
      </ul>
      <p style="padding-left: 10px">
        这个医生超级牛逼,治好了我多年的痔疮,人长得又帅这个医生超级牛逼,治好了我多年的痔疮,人长得又帅这个医生超级牛逼,治好了我多年的痔疮,人长得又帅
      </p>
    </div>
  </div>
</template>

<script lang='ts' setup>


import { ref, onBeforeMount } from "vue";
import { userhandle } from "../../api/userDoctor";
import { useRouter } from "vue-router";
import { showSuccessToast } from 'vant'
import usePersonalStore from '../../store/modules/cart'
let data = ref("");
onBeforeMount(() => {
  const result: any = userhandle().then((res) => {
    console.log(res);
    data.value = res.list;
    console.log(data.value);
  });

});
import { useRouter } from "vue-router";
const router = useRouter()

const info = sessionStorage.getItem("message")
console.log(info)


const handleClick = () => {
  router.push("./chat");
};
const backToHome = () => {
  router.back()
}

const store = usePersonalStore()

const handleAddToCart = (guan: any) => {
  const { name, url, adept, adress } = guan
  const curr = { name, url, adept, adress }

  store.addtocat(curr)
  showSuccessToast('关注成功')
}
</script>


<style lang="less" scoped>
#cxk {
  border-top: 1px solid;
  height: 200px;
  margin-top: 20px;
}

.sps {
  color: rgb(247, 230, 4);
}

.pj {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
}
.van-toast {
  z-index: 9999;
}

.pj li {
  width: 100px;
  height: 25px;
  border: 1px solid rgb(185, 184, 184);
  margin-left: 5px;
  border-radius: 20px;
  text-align: center;
  font-size: 10px;
  margin-top: 8px;
  line-height: 28px;

}

.goods {
  margin-left: 10px;
  color: rgb(24, 24, 24);
  font-size: 15px;
  margin-top: 16px;

  span {
    color: rgb(33, 35, 35);
  }
}

.content {
  font-size: 15px;

  .name {
    span {
      font-size: 12px;
    }

    div {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 16px;
      margin-bottom: 8px;
    }
  }

  .word {
    font-size: 13px;
    margin: 10px 0px;
    margin-bottom: 20px;
  }

  .pic {
    height: 80px;
    border: 1px solid;
    padding: 5px;
    margin-bottom: 10px;

    .logo {
      margin-top: 15px;
      float: left;
    }

    .text {
      float: left;
      text-align: center;
      margin-left: 15px;
      padding: 5px;

      h4 {
        margin: 0px;
        margin-top: 10px;
      }

      span {
        font-size: 13px;
        color: rgb(189, 194, 199);
        margin-top: -10px;
      }
    }

    .btn {
      margin-top: 25px;
    }
  }
}
</style>
